.rc-popover {
	position: fixed;
	z-index: 9999;

	top: 0;
	left: 0;

	display: none;

	width: 100vw;
	height: 100vh;

	&__close {
		cursor: pointer;
		transform: rotate(45deg);

		&:hover {
			color: var(--rc-color-link-active);
		}
	}

	&__header {
		display: flex;
		flex-direction: row;

		margin-bottom: 16px;

		font-size: 21px;
		justify-content: flex-end;
	}

	&__content {
		position: absolute;

		display: flex;

		overflow: auto;

		flex-direction: column;

		height: auto;

		max-height: 70%;

		padding: var(--popover-padding);

		animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95);

		white-space: nowrap;

		opacity: 0;

		border-radius: var(--popover-radius);
		background-color: var(--popover-background);
		box-shadow: 0 0 2px 0 rgba(47, 52, 61, 0.08), 0 0 12px 0 rgba(47, 52, 61, 0.12);
	}

	&__column {
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;

		min-width: var(--popover-column-min-width);

		&:not(:first-child) {
			padding-left: var(--popover-column-padding);
		}

		&-wrapper:not(:first-child) {
			margin-top: var(--popover-column-padding);
		}
	}

	&__content-scroll {
		.rc-popover__item {
			display: block;
		}
	}

	&__title {
		flex: 1;

		margin-bottom: 8px;

		text-transform: uppercase;

		color: var(--popover-title-color);

		font-size: var(--popover-title-text-size);

		font-weight: 600;
	}

	&__item {
		display: flex;

		width: 100%;

		padding: 4px 0;

		cursor: pointer;

		user-select: none;

		transition: all 0.3s;

		color: var(--popover-item-color);

		font-size: var(--popover-item-text-size);
		align-items: center;

		&--alert {
			color: var(--rc-color-error);

			& .rc-icon {
				fill: var(--rc-color-error);
			}
		}

		&--bold {
			font-weight: 900;
		}

		&--star-filled .rc-icon {
			fill: currentColor;
		}

		&--online {
			& .rc-popover__icon {
				color: var(--rc-status-online);
			}
		}

		&--away {
			& .rc-popover__icon {
				color: var(--rc-status-away);
			}
		}

		&--busy {
			& .rc-popover__icon {
				color: var(--rc-status-busy);
			}
		}

		&--offline {
			& .rc-popover__icon {
				color: var(--rc-status-invisible);
			}
		}
	}

	&__label {
		display: flex;

		cursor: pointer;
		align-items: center;
	}

	&__icon {
		display: flex;

		width: 20px;
		margin: 0.25rem 0;
		align-items: center;
		justify-content: center;
	}

	&__icon-element {
		font-size: 18px;

		&--star {
			fill: none;
		}
	}

	&__item-text {
		margin-left: 0.25rem;
	}

	&__divider {
		width: 100%;
		height: var(--popover-divider-height);
		margin: 1rem 0;

		background: var(--popover-divider-color);

		&:last-child {
			display: none;
		}
	}
}

.rc-popover__item-radio {
	visibility: hidden;

	&:checked + .rc-popover__item-radio-label {
		color: #1d73f3;

		&::after {
			opacity: 1;
		}
	}

	&:not(:checked) + .rc-popover__item-radio-label::after {
		opacity: 0;
	}
}

.rc-popover__item-radio-label {
	position: relative;

	margin-left: -20px;

	padding-left: 20px;

	cursor: pointer;

	&::before {
		position: absolute;
		top: 0;
		left: 0;

		width: 15px;
		height: 15px;

		content: '';

		border: 1px solid #979797;
		border-radius: 50px;
		background: transparent;
	}

	&::after {
		position: absolute;
		top: 3px;
		left: 3px;

		width: 9px;
		height: 9px;

		content: '';
		transition: all 0.2s;

		border-radius: 50px;
		background: #1d73f3;
	}
}

.rtl .rc-popover__item-radio-label {
	margin-right: -20px;
	margin-left: 0;
	padding-right: 20px;
	padding-left: 0;

	&::before {
		right: 0;
		left: auto;
	}

	&::after {
		right: 3px;
		left: auto;
	}
}

[data-message-action="unstar-message"] .rc-popover__icon-element--star {
	fill: currentColor;
}

@media (width <= 500px) {
	.rc-popover {
		& .rc-popover__content {
			position: fixed;
			top: initial !important;
			bottom: 0;
			left: 0 !important;

			width: calc(100vw - 16px) !important;
			margin: 8px !important;

			animation: dropup-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);

			&--safariIos {
				bottom: initial;
			}
		}
	}
}

@keyframes dropdown-show {
	0% {
		transform: translate(0, -5%);

		opacity: 0;
	}

	100% {
		transform: translate(0, 0);

		opacity: 1;
	}
}

@keyframes dropup-show {
	0% {
		transform: translate(0, 100%);

		opacity: 0;
	}

	100% {
		transform: translate(0, 0);

		opacity: 1;
	}
}

.rtl .rc-popover {
	&__item-text {
		margin-right: 0.25rem;
		margin-left: auto;
	}
}
